<template>
  <!-- 使用 <svg> 标签创建一个 SVG 图形; :style 动态设置 SVG 的宽度和高度，根据 size 属性的值; 
       <use> 元素来引用一个特定的 SVG 符号，通过计算属性 symbolId 确定符号的 ID，并设置填充颜色为 color 属性的值 -->
  <svg aria-hidden="true" :style="{ width: size + 'px', height: size + 'px' }">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue';

  const props = defineProps({
		iconName: {
			type: String,
			required: true
		},
		color: {
			type: String,
			default: ''
		},
		size: {
			type: [Number, String],
			default: 16
		}
	})

	const symbolId = computed(() => `#icon-${props.iconName}`);
</script>

<style lang="scss" scoped>
  .svg-icon {
    // 填充颜色
    fill: currentColor;
    vertical-align: middle;
  }
</style>
